<!-- #layout name=default -->
<div id="main" class="fixed">
    <div class="heander-panel">
        <div class="page-header">
            <!-- ko ifnot: isNewPage -->
            <h1 class="title pull-left">
                <span data-bind="text: Kooboo.text.common.Page + ': '"></span>
                <strong data-bind="text: name, attr: { title: name }"></strong>
            </h1>
            <!-- /ko -->
            <!-- ko if: isNewPage -->
            <h1 class="title pull-left" data-bind="text: Kooboo.text.common.Page + ': '"></h1>
            <div class="form-group pull-left">
                <input type="text" data-bind="value: name, error: name" placeholder="name" class="input-large form-control">
            </div>
            <!-- /ko -->
            <div data-bind="component: { name: 'kb-multilang-selector', params: multiLangs }, visible: curType() == 'preview'"></div>
            <button data-bind="visible: pageContent && curType() == 'code', click: formatCode" type="button" class="btn btn-default pull-right">Format code</button>
        </div>
    </div>
    <kb-page-widget-meta params="{multiLangs: multiLangs}"></kb-page-widget-meta>
    <div class="block-fullpage with-buttons">
        <div class="block-visual-editor default">
            <div class="tabs-bottom">
                <div class="tab-content">
                    <section class="tab-pane" data-bind="css: { 'active': curType() == 'preview' }">
                        <div class="kb-editor" style="overflow: hidden;">
                            <iframe src="about:blank" id="page_iframe" class="kb-iframe"></iframe>
                        </div>
                        <div class="kb-panel">
                            <ul class="nav nav-tabs">
                                <li class="active">
                                    <a href="#layout_design" data-toggle="tab">Design</a>
                                </li>
                                <li>
                                    <a href="#page_setting" data-toggle="tab">Settings</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <section id="layout_design" class="tab-pane active">
                                    <div class="panel-group">
                                        <div data-bind="component: { name: 'kb-page-positions' }"></div>
                                    </div>
                                </section>
                                <section id="page_setting" class="tab-pane">
                                    <div class="panel-group">
                                        <div data-bind="component: { name: 'kb-page-basic-settings', params: { settings: settings(), multiLangs: multiLangs() } }"></div>
                                        <div data-bind="component: { name: 'kb-page-html-meta', params: { settings: settings, defaultLang: multiLangs() && multiLangs().default} }"></div>
                                        <div data-bind="component: { name: 'kb-page-parameters', params: settings }"></div>
                                        <div>
                                            <div class="panel panel-default">
                                                <div class="panel-heading clickable" data-toggle="collapse" data-target="#J_Setting_Styles">
                                                    <h4 class="panel-title">Styles</h4>
                                                </div>
                                                <div id="J_Setting_Styles" class="panel-collapse collapse">
                                                    <ul class="list-group" data-bind="sortable: bindingPanel().styleList">
                                                        <li class="list-group-item" data-bind="attr:{class:selected()?'list-group-item bg-gray':'list-group-item'}">
                                                            <span class="sortable">
                                                                <i class="glyphicon glyphicon-list"></i>
                                                            </span>
                                                            <a class="btn gray btn-xs pull-right" href="javascript:;" title="Remove" data-bind="tooltip:Kooboo.text.common.remove,click:$root.bindingPanel().removeStyle">
                                                                <i class="fa fa-minus"></i>
                                                            </a>
                                                            <!-- ko if: text -->
                                                            <a class="btn blue btn-xs pull-right" href="javascript:;" title="Edit" data-bind="tooltip:Kooboo.text.common.edit,click:$root.bindingPanel().editJsCss">
                                                                <i class="fa fa-pencil"></i>
                                                            </a>
                                                            <!-- /ko -->
                                                            <span data-bind="text:name" class="nowrap-text"></span>
                                                        </li>
                                                    </ul>
                                                    <div class="panel-body">
                                                        <button type="button" class="btn blue btn-xs pull-right" data-bind="click: bindingPanel().createStyle">
                                                            <i class="fa fa-plus"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="panel panel-default">
                                                <div class="panel-heading clickable" data-toggle="collapse" data-target="#J_Setting_Scripts">
                                                    <h4 class="panel-title">Scripts</h4>
                                                </div>
                                                <div id="J_Setting_Scripts" class="panel-collapse collapse">
                                                    <ul class="list-group" id="head-scripts" data-bind="sortable: bindingPanel().bodyScriptList">
                                                        <li class="list-group-item" data-bind="css:{'bg-gray':selected}">
                                                            <span class="sortable">
                                                                <i class="glyphicon glyphicon-list"></i>
                                                            </span>
                                                            <a class="btn gray btn-xs pull-right" href="javascript:;" title="Remove" data-bind="tooltip:Kooboo.text.common.remove,click:$root.bindingPanel().removeScript">
                                                                <i class="fa fa-minus"></i>
                                                            </a>
                                                            <!-- ko if: text -->
                                                            <a class="btn blue btn-xs pull-right" href="javascript:;" title="Edit" data-bind="tooltip:Kooboo.text.common.edit,click:$root.bindingPanel().editJsCss">
                                                                <i class="fa fa-pencil"></i>
                                                            </a>
                                                            <!-- /ko -->
                                                            <span data-bind="text:name" class="nowrap-text"></span>
                                                        </li>
                                                    </ul>
                                                    <div class="panel-body">
                                                        <button type="button" class="btn blue btn-xs pull-right" data-bind="click: bindingPanel().createScript.bind(this,false)">
                                                            <i class="fa fa-plus"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </section>
                    <section class="tab-pane" data-bind="css: { 'active': curType() == 'code' }">
                        <textarea data-bind="codeMirror: {
                            mode: 'htmlmixed',
                            value: pageContent,
                        }"></textarea>
                    </section>
                </div>
                <ul class="nav nav-tabs">
                    <li data-bind="css: { 'active': curType() == 'preview' }, click: changeType.bind(this,'preview')">
                        <a href="javascript:;">Preview</a>
                    </li>
                    <li data-bind="css: { 'active': curType() == 'code' }, click: changeType.bind(this,'code')">
                        <a href="javascript:;">Source code</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="page-buttons">
        <div class="btn-group dropup">
            <button data-bind="click: onSaveAndReturn" class="btn green" style="margin: 0;">Save & Return</button>
            <a class="btn green dropdown-toggle" data-toggle="dropdown" style="margin:0;min-width:auto;">
                <i class="fa fa-angle-up"></i>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li>
                    <a href="javascript:;" data-bind="click: onSave">Save</a>
                </li>
            </ul>
        </div>
        <a href="javascript:;" data-bind="click: userCancel" class="btn gray">Cancel</a>
    </div>
    <kb-layout-style-script></kb-layout-style-script>
    <kb-page-widget-component-selector></kb-page-widget-component-selector>
</div>

<script>
    Kooboo.pageEditor = {
        component: {},
        store: {},
        util: {},
        viewModel: {},
        widget: {}
    }
</script>
<script>
    (function() {
        Kooboo.loadJS([
            "/_Admin/Scripts/kooboo/Guid.js",
            "/_Admin/Scripts/lib/js-beautify/lib/beautify-html.js",
            "/_Admin/Scripts/lib/codemirror/lib/codemirror.js",
            "/_Admin/Scripts/kobindings.codemirror.js",
            "/_Admin/Scripts/components/kbMultilangSelector.js",
            "/_Admin/Scripts/layoutEditor/viewModel/Position.js",
            "/_Admin/Scripts/layoutEditor/viewModel/Label.js",
            "/_Admin/Scripts/layoutEditor/viewModel/Style.js",
            "/_Admin/Scripts/layoutEditor/viewModel/Script.js",
            "/_Admin/Scripts/pageEditor/stores/ComponentStore.js",
            "/_Admin/Scripts/layoutEditor/stores/BindingStore.js",
            "/_Admin/Scripts/layoutEditor/stores/PositionStore.js",
            "/_Admin/Scripts/layoutEditor/viewModel/BindingPanel.js",
            "/_Admin/Scripts/tool/KoobooToolTemplateManager.js",
            "/_Admin/Scripts/tool/KoobooTool.js",
            "/_Admin/Scripts/pageEditor/utils/ComponentTool.js",
            "/_Admin/Scripts/pageEditor/utils/Position.js",
            "/_Admin/Scripts/pageEditor/utils/PositionScanner.js",
            "/_Admin/Scripts/pageEditor/components/basic-settings.js",
            "/_Admin/Scripts/pageEditor/components/htmlmeta.js",
            "/_Admin/Scripts/pageEditor/components/parameters.js",
            "/_Admin/Scripts/layoutEditor/components/style-script.js",
            "/_Admin/Scripts/layoutEditor/components/KBFrame.js",
            "/_Admin/Scripts/pageEditor/components/positions.js",
            "/_Admin/Scripts/lib/x-editable/bootstrap-editable.min.js",
            "/_Admin/Scripts/kobindings.editable.js",
            "/_Admin/Scripts/lib/bootstrap3-typeahead.min.js",
            "/_Admin/Scripts/lib/jquery.textarea_autosize.min.js",
            "/_Admin/Scripts/kobindings.typeahead.js",
            "/_Admin/Scripts/pageEditor/widgets/html-meta.js",
            "/_Admin/Scripts/lib/jstree.min.js",
            "/_Admin/Scripts/pageEditor/widgets/component-selector.js",
            "/_Admin/Scripts/lib/jquery-ui-customized.js",
            "/_Admin/Scripts/kobindings.sortable.js",
            "/_Admin/Scripts/lib/codemirror/mode/htmlmixed/htmlmixed.js",
            "/_Admin/Scripts/lib/codemirror/mode/javascript/javascript.js",
            "/_Admin/Scripts/lib/codemirror/mode/xml/xml.js",
            "/_Admin/Scripts/lib/codemirror/mode/css/css.js"
        ])
        Kooboo.loadCSS([
            "/_Admin/Scripts/lib/codemirror/lib/codemirror.css",
            "/_Admin/Styles/jstree/style.min.css",
            "/_Admin/Styles/bootstrap-editable/css/bootstrap-editable.css"
        ])
    })()
</script>
<script src="/_Admin/View/Page/EditLayout.js"></script>